<!--
  * @Author: daidai
  * @Date: 2022-03-01 14:13:04
  * @LastEditors: Please set LastEditors
  * @LastEditTime: 2022-09-27 15:04:49
  * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
 -->
<template>
  <div class="right_top_container">
    <div class="activation-overview">
      <!-- 主要进度环和数据展示 -->
      <div class="main-content">
        <!-- 左侧环形图 -->
        <div class="progress-section">
          <div class="progress-wrapper">
            <Echart
              id="activationProgress"
              :options="progressOption"
              class="progress-chart"
            />
            <div class="progress-center">
              <div class="rate-text">{{ activationRate }}%</div>
              <div class="rate-label">激活率</div>
            </div>
          </div>
        </div>

        <!-- 右侧数据卡片 -->
        <div class="data-section">
          <div class="data-cards">
            <div class="data-card activated">
              <div class="card-icon">
                <i class="el-icon-check"></i>
              </div>
              <div class="card-content">
                <div class="card-value">{{ formatNumber(activatedCount) }}</div>
                <div class="card-label">已激活</div>
              </div>
              <div class="card-bg"></div>
            </div>

            <div class="data-card pending">
              <div class="card-icon">
                <i class="el-icon-time"></i>
              </div>
              <div class="card-content">
                <div class="card-value">{{ formatNumber(pendingCount) }}</div>
                <div class="card-label">待激活</div>
              </div>
              <div class="card-bg"></div>
            </div>

            <div class="data-card total">
              <div class="card-icon">
                <i class="el-icon-user"></i>
              </div>
              <div class="card-content">
                <div class="card-value">{{ formatNumber(totalCount) }}</div>
                <div class="card-label">总数</div>
              </div>
              <div class="card-bg"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { currentGET } from "api/modules";
  import { graphic } from "echarts";
  import * as echarts from "echarts";

  export default {
    props: {
      // 接收父组件传递的账号数据
      accountData: {
        type: Object,
        default: () => ({}),
      },
    },

    data() {
      return {
        option: {},
        pageflag: false,
        timer: null,
        progressOption: {},
        activatedCount: 0,
        pendingCount: 0,
        totalCount: 0,
      };
    },

    computed: {
      activationRate() {
        if (this.totalCount === 0) return "0.00";
        return ((this.activatedCount / this.totalCount) * 100).toFixed(2);
      },
      completionRate() {
        // 假设目标是90%的激活率
        const targetRate = 90;
        const currentRate = parseFloat(this.activationRate);
        return Math.min((currentRate / targetRate) * 100, 100).toFixed(2);
      },
    },

    watch: {
      // 监听父组件传递的数据变化
      accountData: {
        handler(newData) {
          if (newData && Object.keys(newData).length > 0) {
            this.updateDataFromProps(newData);
            this.pageflag = true;
          }
        },
        immediate: true,
        deep: true,
      },
    },

    created() {},

    mounted() {
      this.getData();
      this.initProgressChart();
      // 添加定时器定期更新图表
      this.timer = setInterval(() => {
        this.initProgressChart();
      }, 30000); // 30秒更新一次
    },

    beforeDestroy() {
      this.clearData();
    },

    methods: {
      // 根据父组件传递的数据更新组件状态
      updateDataFromProps(data) {
        console.log("更新企微激活数据:", data);

        // 提取企微相关数据
        this.totalCount = data.totalStudents || 0;
        this.activatedCount = data.qwActiveStats || 0;
        this.pendingCount = this.totalCount - this.activatedCount;

        // 重新初始化图表
        this.initProgressChart();
      },

      clearData() {
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
      },

      formatNumber(num) {
        if (num >= 10000) {
          return (num / 10000).toFixed(1) + "w";
        }
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      },

      getCurrentTime() {
        const now = new Date();
        return `${now.getHours().toString().padStart(2, "0")}:${now
          .getMinutes()
          .toString()
          .padStart(2, "0")}`;
      },

      getData() {
        this.pageflag = true;
        // 如果有父组件数据，优先使用父组件数据
        if (this.accountData && Object.keys(this.accountData).length > 0) {
          this.updateDataFromProps(this.accountData);
        }
      },

      init(xData, yData, yData2) {
        // 保留原有的折线图逻辑，如果需要的话
        this.option = {
          xAxis: {
            type: "category",
            data: xData,
            boundaryGap: false,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(31,99,163,.2)",
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(31,99,163,.1)",
              },
            },
            axisLabel: {
              color: "#7EB7FD",
              fontWeight: "500",
            },
          },
          yAxis: {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(31,99,163,.2)",
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(31,99,163,.1)",
              },
            },
            axisLabel: {
              color: "#7EB7FD",
              fontWeight: "500",
            },
          },
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0,0,0,.6)",
            borderColor: "rgba(147, 235, 248, .8)",
            textStyle: {
              color: "#FFF",
            },
          },
          grid: {
            show: true,
            left: "10px",
            right: "30px",
            bottom: "10px",
            top: "28px",
            containLabel: true,
            borderColor: "#1F63A3",
          },
          series: [
            {
              data: yData2,
              type: "line",
              smooth: true,
              symbol: "none",
              name: "该时段报到人数",
              color: "rgba(9,202,243,.7)",
              areaStyle: {
                color: new graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(9,202,243,.7)",
                    },
                    {
                      offset: 1,
                      color: "rgba(9,202,243,.0)",
                    },
                  ],
                  false
                ),
              },
            },
          ],
        };
      },

      initProgressChart() {
        this.progressOption = {
          backgroundColor: "transparent",
          series: [
            {
              type: "pie",
              radius: ["65%", "85%"],
              center: ["50%", "50%"],
              startAngle: 90,
              silent: true,
              data: [
                {
                  value: this.activatedCount,
                  name: "已激活",
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00ff88" },
                      { offset: 0.5, color: "#00cc66" },
                      { offset: 1, color: "#00aa44" },
                    ]),
                  },
                },
                {
                  value: this.pendingCount,
                  name: "待激活",
                  itemStyle: {
                    color: "rgba(255, 255, 255, 0.1)",
                  },
                },
              ],
              labelLine: { show: false },
              label: { show: false },
              emphasis: { disabled: true },
            },
            // 外圆环装饰
            {
              type: "pie",
              radius: ["88%", "90%"],
              center: ["50%", "50%"],
              silent: true,
              data: [
                {
                  value: 100,
                  itemStyle: {
                    color: "rgba(0, 253, 250, 0.3)",
                  },
                },
              ],
              labelLine: { show: false },
              label: { show: false },
            },
          ],
        };
      },
    },
  };
</script>

<style lang="scss" scoped>
  .right_top_container {
    height: 100%;
    width: 100%;
  }

  .activation-overview {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 8px;
    box-sizing: border-box;

    .main-content {
      flex: 1;
      display: flex;
      gap: 12px;
      min-height: 0;

      .progress-section {
        flex: 0 0 140px;
        display: flex;
        align-items: center;
        justify-content: center;

        .progress-wrapper {
          position: relative;
          width: 140px;
          height: 140px;

          .progress-chart {
            width: 100%;
            height: 100%;
          }

          .progress-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            pointer-events: none;

            .rate-text {
              font-size: 24px;
              font-weight: 800;
              color: #00fdfa;
              line-height: 1;
              text-shadow: 0 0 20px rgba(0, 253, 250, 0.6);
              margin-bottom: 4px;
            }

            .rate-label {
              font-size: 12px;
              color: rgba(255, 255, 255, 0.8);
              font-weight: 500;
              letter-spacing: 1px;
            }
          }
        }
      }

      .data-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 0;

        .data-cards {
          display: flex;
          flex-direction: column;
          gap: 8px;
          flex: 1;

          .data-card {
            position: relative;
            background: linear-gradient(
              135deg,
              rgba(0, 20, 40, 0.6),
              rgba(0, 40, 80, 0.3)
            );
            border: 1px solid rgba(0, 253, 250, 0.2);
            border-radius: 8px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            overflow: hidden;
            flex: 1;

            &::before {
              content: "";
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(
                90deg,
                transparent,
                rgba(0, 253, 250, 0.1),
                transparent
              );
              transition: left 0.5s ease;
            }

            &:hover {
              border-color: rgba(0, 253, 250, 0.5);
              box-shadow: 0 4px 20px rgba(0, 253, 250, 0.2);
              transform: translateY(-1px);

              &::before {
                left: 100%;
              }
            }

            .card-icon {
              width: 32px;
              height: 32px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 16px;
              flex-shrink: 0;
              box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            }

            .card-content {
              flex: 1;
              min-width: 0;

              .card-value {
                font-size: 20px;
                font-weight: 700;
                color: #ffffff;
                line-height: 1.2;
                margin-bottom: 2px;
                text-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
              }

              .card-label {
                font-size: 11px;
                color: rgba(255, 255, 255, 0.7);
                font-weight: 500;
                letter-spacing: 0.5px;
              }
            }

            .card-bg {
              position: absolute;
              top: 0;
              right: 0;
              width: 60px;
              height: 100%;
              opacity: 0.1;
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              pointer-events: none;
            }

            &.activated {
              .card-icon {
                background: linear-gradient(135deg, #00ff88, #00cc66);
                color: #000;
              }

              .card-value {
                color: #00ff88;
              }
            }

            &.pending {
              .card-icon {
                background: linear-gradient(135deg, #ff9500, #ff7b00);
                color: #000;
              }

              .card-value {
                color: #ff9500;
              }
            }

            &.total {
              .card-icon {
                background: linear-gradient(135deg, #00fdfa, #0099cc);
                color: #000;
              }

              .card-value {
                color: #00fdfa;
              }
            }
          }
        }

        .progress-bars {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .progress-item {
            .progress-info {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 4px;

              .progress-name {
                font-size: 11px;
                color: rgba(255, 255, 255, 0.8);
                font-weight: 500;
              }

              .progress-percent {
                font-size: 11px;
                color: #00fdfa;
                font-weight: 600;
              }
            }

            .progress-bar {
              height: 6px;
              background: rgba(255, 255, 255, 0.1);
              border-radius: 3px;
              overflow: hidden;
              position: relative;

              .progress-fill {
                height: 100%;
                background: linear-gradient(90deg, #00ff88, #00cc66);
                border-radius: 3px;
                transition: width 1s ease;
                position: relative;

                &::after {
                  content: "";
                  position: absolute;
                  top: 0;
                  left: -100%;
                  width: 100%;
                  height: 100%;
                  background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.4),
                    transparent
                  );
                  animation: progressShine 2s infinite;
                }

                &.completion {
                  background: linear-gradient(90deg, #00fdfa, #0099cc);
                }
              }
            }
          }
        }
      }
    }

    .status-info {
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      background: rgba(0, 20, 40, 0.4);
      border: 1px solid rgba(0, 253, 250, 0.1);
      border-radius: 6px;
      backdrop-filter: blur(5px);

      .status-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.6);

        .status-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.3);

          &.active {
            background: #00ff88;
            box-shadow: 0 0 8px #00ff88;
            animation: statusPulse 2s infinite;
          }
        }
      }
    }
  }

  @keyframes progressShine {
    0% {
      left: -100%;
    }
    100% {
      left: 100%;
    }
  }

  @keyframes statusPulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.6;
      transform: scale(1.2);
    }
  }
</style>
